<template>
  <div class="anTopic">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Blog_Analysis' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Blog_Analysis</el-breadcrumb-item>
        <el-breadcrumb-item>AnTopic</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="one"></div>
      <div id="two"></div>

      <div style="margin-top: 20px;">
      <h1 style="text-align: center;">掘金博客话题分析</h1>
      
        <h2>结论与建议</h2>
        <p>
          

掘金博客作为技术交流的平台，每天都有大量的文章发表，涉及各种技术领域和话题。为了更好地了解用户关注的话题和内容，我们对博客文章的话题出现次数进行了统计分析。

从数据中可以看出，金石计划征文活动、每天一个知识点和日新计划更文活动是出现次数最多的话题，分别为2471次、1561次和468次。这些话题主要涉及写作活动和内容产出，说明用户对于如何提高写作技巧和分享知识非常关注。

此外，我的技术写作成长之路、创作者训练营、码上掘金等话题也相对较受欢迎，这些话题主要关注技术写作和创作者成长，反映了用户对于个人成长和技能提升的需求。

在技术领域方面，人工智能、Docker、网络协议、Google I/O大会等话题也备受关注。这些话题涵盖了当前技术领域的热点和发展趋势，说明用户对于新技术和新应用非常感兴趣。

值得注意的是，有些话题的出现次数相对较少，如程序员健康指南、我的2023年度关键词等。这可能是因为这些话题在当前的技术领域中相对较为冷门，或者与掘金博客的用户群体和内容定位不太相关。

通过分析掘金博客的话题分布情况，我们可以更好地了解用户的关注点和需求。这有助于我们优化博客的内容推荐和编辑策略，更好地满足用户的需求和口味。同时，也有助于我们发现和挖掘潜在的技术趋势和热门领域，为未来的内容规划和方向提供参考。       </p>


        <div style="height: 100px;width: 200px;"></div>
    </div>
    </div>

  </div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      category_barchartDome: null,
      category_barmyChart: null,
      category_baroption: null,

      category_piechartDome: null,
      category_piemyChart: null,
      category_pieoption: null,

      topic_barxAxis: {
        type: 'category',
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },
      topic_barxAxis_data: [],
      topic_bardata: [],
      topic_piedata: [],
    }
  },
  mounted() {
    this.getCategory()
  },
  methods: {
    getCategory() {
      // http://127.0.0.1:9292/topic
      this.$http({
        url: '/topic',
        method: 'post'
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$message.error('获取文章话题数据失败')
        } else {
          // 对数据取前70个
          let times = 0
          // 处理数据

          var topic_keys = Object.keys(res.data.data)
          topic_keys.forEach(item => {

            if (times < 70) { 
              // console.log(item + " : " + res.data.data[item])
              // 柱状图键，即标题
              this.topic_barxAxis_data.push(item)
              // 柱状图数据，即内容
              this.topic_bardata.push(res.data.data[item])
              // 饼图数据直接给 键和值
              let temp_pie_item = { "value": res.data.data[item], "name": item }
              this.topic_piedata.push(temp_pie_item)
             }
            
            times++
          })

          // 改变柱状图的x轴标题
          this.topic_barxAxis.data = this.topic_barxAxis_data

          // 处理完数据再绘图
          this.draw_week_bar()

          this.draw_week_pie()

        }
      }).catch(res => {
        console.log(res);
      })
    },

    // 星期柱状图 one
    draw_week_bar() {
      this.category_barchartDome = document.getElementById('two');
      this.category_barmyChart = echarts.init(this.category_barchartDome);

      this.category_baroption = {
        title: {
          show: true,
          text: "文章标签前70分布情况：",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.topic_barxAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.topic_bardata,
            type: 'bar',
            showBackground: true,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: { //数值样式
                color: 'oldlace',//字体颜色
                fontSize: 10//字体大小
                }
            }
          }
          
        ]
      };

      this.category_baroption && this.category_barmyChart.setOption(this.category_baroption);
    },
    // 星期饼图 two
    draw_week_pie() {
      this.category_piechartDome = document.getElementById('one');
      this.category_piemyChart = echarts.init(this.category_piechartDome);
      this.category_pieoption;

      this.category_pieoption = {
        title: {
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.topic_piedata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.category_pieoption && this.category_piemyChart.setOption(this.category_pieoption);
    }

  }
}
</script>

<style scoped>
.anTopic {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}
/* 去除滚动栏，保留滚动效果 */
.anTopic::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */

  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}
/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#one {
  width: 100%;
  height: 92%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#two {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  height: 92%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素     */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

</style>